@charset "utf-8";
@function w($px){
    @return ($px/640px)*100%;
}
.web{
    width: 100%;
    height: 100%;
    #kugou{
        width: 100%;
        img{
           width: 100%;
           display: block;
        }
        /***************logo***************/
        .logo{
            width: w(103px);
            margin-left: w(44px);
            padding-top: 15px;
            overflow: hidden;
        }
       /*******************首页*******************/
        .shouye{
            position: relative;
            width: 100%;
            background-image: url(../images/shouye.png);
            background-size: cover;
            /*********标题*********/
           .title_1{
               width: w(381px);
               margin-left: w(126px);
               margin-top: 20px;
               overflow: hidden;
           }
           .title_2{
               width: w(576px);
               margin-left: w(23px);
               margin-top: -13px;
               overflow: hidden;
           }
           .title_3{
               width: w(352px);
               margin-left: w(148px);
               margin-top: -8px;
               overflow: hidden;
           }
           .title_4{
               width: w(341px);
               margin-left: w(154px);
               margin-top: 2px;
               overflow: hidden;
           }
           //云
           .yun_1{
               position: absolute;
               width: w(77px);
               left: w(41px);
               top: 209px;
               overflow: hidden;
               animation: yun_1 15s ease-in-out infinite;
           }
           /**************动画效果**************/
           @-webkit-keyframes yun_1{
                from{
                    transform: translateY(5px);
                }
                25%{
                    transform: translateX(300px);
                }
                50%{
                    transform:  translateY(15px);
                }
                75%{
                    transform: translateX(150px);
                }
                to{
                    transform: translateX(5px);
                }
            }
            .yun_2{
               position: absolute;
               width: w(43px);
               left: w(406px);
               top: 270px;
               overflow: hidden;
               animation: yun_2 15s ease-in-out infinite;
            }
            /**************动画效果**************/
            @-webkit-keyframes yun_2{
                from{
                    transform: translateX(-25px);
                }
                25%{
                    transform: translateY(8px);
                }
                50%{
                    transform:  translateY(15px);
                }
                75%{
                    transform: translateX(10px);
                }
                to{
                    transform: translateX(0px);
                }
            }
            .yun_3{
               position: absolute;
               width: w(59px);
               left: w(510px);
               top: 230px;
               overflow: hidden;
               animation: yun_3 15s ease-in-out infinite;
            }
            /**************动画效果**************/
            @-webkit-keyframes yun_3{
                from{
                    transform: translateY(8px);
                }
                25%{
                    transform: translateX(8px) ;
                }
                50%{
                    transform:  translateX(15px);
                }
                75%{
                    transform: translateY(10px);
                }
                to{
                    transform: translateY(5px);
                }
            }
            .yun_4{
               position: absolute;
               width: w(59px);
               left: w(550px);
               top: 310px;
               overflow: hidden;
               animation: yun_4 15s linear infinite;
            }
            /**************动画效果**************/
            @-webkit-keyframes yun_4{
                from{
                    transform: translateX(15px);
                }
                25%{
                    transform: translateX(10px);
                }
                50%{
                    transform:  translateY(15px);
                }
                75%{
                    transform: translateY(10px);
                }
                to{
                    transform: translateX(10px);
                }
            }
            .yun_5{
               position: absolute;
               width: w(34px);
               left: w(425px);
               top: 335px;
               overflow: hidden;
               animation: yun_5 20s ease-in infinite;
            }
            /**************动画效果**************/
            @-webkit-keyframes yun_5{
                from{
                    transform: translateY(5px);
                }
                25%{
                    transform: translateX(20px);
                }
                50%{
                    transform:  translateY(15px);
                }
                75%{
                    transform: translateY(5px);
                }
                to{
                    transform: translateY(5px);
                }
            }
            /*******月球********/
           .qiu{
               position: absolute;
               width: w(204px);
               left: w(370px);
               top: 245px;
               overflow: hidden;
            }
            /*******气泡********/
           .qipao_1{
               position: absolute;
               width: w(94px);
               left: w(48px);
               top: 320px;
               overflow: hidden;
            }
            .qipao_2{
               position: absolute;
               width: w(148px);
               left: w(447px);
               top: 335px;
               overflow: hidden;
            }
            .qipao_3{
               position: absolute;
               width: w(128px);
               left: w(54px);
               top: 460px;
               overflow: hidden;
            }
            .qipao_4{
               position: absolute;
               width: w(94px);
               left: w(485px);
               top: 465px;
               overflow: hidden;
            }
           /*********人*********/
            .renwu{
               width: w(339px);
               margin-left: w(141px);
               margin-top: 35px;
               overflow: hidden;
            }
            /*********按钮*********/
            .ceshi{
               width: w(171px);
               margin-left: w(232px);
               margin-top: 7px;
               overflow: hidden;
               &:hover{
                   opacity: .5;
               }
            }
           
            
        }
        /*******************第一页*******************/
        .ye{
            position: relative;
            width: 100%;
            background-image: url(../images/beijing.png);
            background-size: cover;
            .wenti{
                font-size: 18px;
                color: #fff;
                width: 88%;
                margin-left: w(46px);
                padding-top: 15px;
            }
            /****图片****/
           .tupian_01{
               width: w(250px);
               overflow: hidden;
               margin: 0 auto;
               margin-top: 40px;
            }
            .tupian{
               width: w(250px);
               overflow: hidden;
               margin: 0 auto;
               margin-top: 40px;
            }
            
      
            /****云****/
           .yun{
               .yun_01{
                    width: w(112px);
                    overflow: hidden;
                    margin-top: -29px;
                    margin-left: w(32px);
               }
               .yun_02{
                    width: w(49px);
                    overflow: hidden;
                    margin-top: -56px;
                    margin-left: w(55px);
               }
               .yun_03{
                    width: w(85px);
                    overflow: hidden;
                    margin-top: -35px;
                    margin-left: w(222px);
               }
               .yun_04{
                    width: w(63px);
                    overflow: hidden;
                    margin-top: -23px;
                    margin-left: w(0px);
               }
               .yun_05{
                    width: w(111px);
                    overflow: hidden;
                    margin-top: -68px;
                    margin-left: w(562px);
               }
               
            }
            /************选择************/
           .xuanxiang{
               margin-top: 65px;
              .xuanze{
                   background-image: url(../images/xz_w.png);
                   background-size: contain;
                   background-repeat: no-repeat; 
                   position: relative;
                   width: w(368px);
                   height: 40px;
                   margin-top: 10px;
                   margin-left: w(57px);
                   overflow: hidden;
                   .name{
                       position: absolute;
                       top: 4px;
                       left: 10px;
                       font-family: "微软雅黑";
                       font-size: 15px;
                       span{
                           padding-right: 9px;
                       }
                    }
                    .lang{
                         font-size: 13px;
                         font-family: "楷体";
                    }
                    &:hover{
                        background-image: url(../images/xz_y.png);
                    }
                    &:active{
                        background-image: url(../images/xz_y.png);
                    }
               } 
           }
           /************音乐************/
          .music{
              margin-top: -190px;
              .yin_1{
                  width: w(104px);
                  overflow: hidden;
                  margin-left: w(525px);
              }
              .yin_2{
                  width: w(74px);
                  margin-left: w(525px);
                  overflow: hidden;
              }
              .yin_3{
                  width: w(75px);
                  margin-left: w(525px);
                  overflow: hidden;
              }
              .yin_4{
                  width: w(69px);
                  margin-left: w(525px);
                  overflow: hidden;
              }
              .yin_5{
                  width: w(65px);
                  margin-left: w(525px);
                  overflow: hidden;
              }
          }
           /************狗************/
          .dog{
              width: w(83px);
              margin-left: w(450px);
              margin-top: -75px;
              overflow: hidden;
          }
        }
       /*********第二页处理**************/
       .tupian_02{
           width: w(212px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 30px;
           margin-bottom: 40px;
        }
        /*********第三页处理**************/
       .tupian_03{
           width: w(334px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 20px;
           margin-bottom: 40px;
        }
         /*********第四页处理**************/
       .tupian_04{
           width: w(241px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 55px;
           margin-bottom: 65px;
        }
         /*********第五页处理**************/
       .tupian_05{
           width: w(353px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 40px;
           margin-bottom: 60px;
        }
         .name_05{
            position: absolute;
            top: 4px;
            left: 10px;
            font-family: "微软雅黑";
            font-size: 13px;
            span{
               padding-right: 9px;
            }
        }
         /*********第六页处理**************/
       .tupian_06{
           width: w(345px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 60px;
           margin-bottom: 60px;
        }
       
         /*********第六页处理*************/
        .tupian_07{
           width: w(359px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 50px;
           margin-bottom: 50px;
        }
         /*********第十二页处理*************/
        .tupian_12{
           width: w(323px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 50px;
           margin-bottom: 50px;
        }
         /*********第十四页处理*************/
        .name_14{
            position: absolute;
            top: 4px;
            left: 10px;
            font-family: "微软雅黑";
            font-size: 14px;
            span{
               padding-right: 9px;
            }
        }
         /*********第十五页处理*************/
        .tupian_15{
           width: w(291px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 50px;
           margin-bottom: 45px;
        }
        /*********第十六页处理*************/
        .tupian_16{
           width: w(330px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 40px;
           margin-bottom: 50px;
        }
         /*********第十七页处理*************/
        .tupian_17{
           width: w(350px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 40px;
           margin-bottom: 70px;
        }
         /*********第十九页处理*************/
        .tupian_19{
           width: w(350px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 40px;
           margin-bottom: 40px;
        }
         /*********第二十二页处理*************/
        .tupian_22{
           width: w(300px);
           overflow: hidden;
           margin: 0 auto;
           margin-top: 50px;
           margin-bottom: 40px;
        }
        .name_four{
            position: absolute;
            top: 4px;
            left: 10px;
            font-family: "微软雅黑";
            font-size: 15px;
            padding-left: 40%;
        }
         /*************测试结果页*************/
        .ceshi{
            position: relative;
            width: 100%;
            background-image: url(../images/beijing.png);
            background-size: cover;
            .kuang{
                position: relative;
                width: w(534px);
                height: 500px;
                margin-left: w(56px);
                padding-top: 10px;
                margin: 0 auto;
                .jieguo{
                    position: absolute;
                    width: 86%;
                    top: 40px;
                    padding: 10px 30px 10px 10px;
                    text-align: center;
                    .title{
                        margin: 0 auto;
                        width: w(350px);
                        overflow: hidden;
                    }
                    .zi{
                        margin-top: 15px;
                        margin-bottom: 20px;
                        .font{
                            width: 100%;
                            font-size: 22px;
                            color: #fff;
                            line-height: 40px;
                            .geren{
                                color: #36ff00;
                            }
                        }
                    }
                }
                .fenxiang{
                    width: w(200px);
                    overflow: hidden;
                    position: absolute;
                    bottom: 60px;
                    right: 12%;
                    cursor: pointer;
                }
                 /*********人*********/
                .renwu{
                   width: w(339px);
                   margin-left: w(75px);
                   overflow: hidden;
                   position: absolute;
                   bottom: -50px;
                }
            }

        }
        /*************好友评价页*************/
        .pingjia{
             position: relative;
            width: 100%;
            background-image: url(../images/beijing.png);
            background-size: cover;
            //狗
            .dog_tx{
                width: w(173px);
                overflow: hidden;
                margin: 0 auto;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .ces{
                width: 80%;
                margin: 0 auto;
                text-align: center;
                .font_ce{
                    font-size: 20px;
                    color: #fff;
                    line-height: 35px;
                    .yellow{
                        color: #fff000;
                    }
                }
            }
            .ping{
                margin-left: 25px;
                .font_g{
                    font-size: 18px;
                    color: #d5d5d5;
                }
            }

            /****评价标签****/
           .biaoqian{
               width: 80%;
               margin: 0 auto;
               font-size: 16px;
               color: #2f3400;
               .font_pj{
                   font-size: 14px;
                   color: #2f3400;
                   line-height: 30px;
               }
               .one{
                   background:rgba(255,248,137,.5);
                   text-align: center;
                   border-radius: 50px;
                   padding: 2px 10px;
                   height: 30px;
                   min-width: 80px;
                   margin-top: 35px;
                   margin-left: 10px;
               }
               .two{
                   background:rgba(253,252,78,.8);
                   text-align: center;
                   border-radius: 50px;
                   padding: 2px 10px;
                   height: 30px;
                   min-width: 80px;
                   margin-top: 15px;
                    margin-left: 10px;
               }
               .three{
                   background:rgba(255,255,255,.8);
                   text-align: center;
                   border-radius: 50px;
                   padding: 2px 10px;
                   height: 30px;
                   min-width: 80px;
                   margin-left: 65px;
               }
               .four{
                   background:rgba(238,225,18,.8);
                   text-align: center;
                   border-radius: 50px;
                   padding: 2px 10px;
                   height: 30px;
                   min-width: 80px;
                   margin-top: 10px;
                   margin-left: 160px;
               }
           }
           .bottom{
               text-align: center;
               margin: 0 auto;
               width: 85%;
               margin-top: 2px;
               .font_wenti{
                   font-size: 16px;
                   color: #FFF;
                   font-family: "楷体";
                   line-height: 38px;
                   padding-left: 5px;
               }
               textarea{
                   width: 95%;
                   padding: 5px 10px;
                   border: 1px solid #fff;
                   background: none;
                   resize: none;
                   color: #fff;
                   font-size: 16px;
               }
               
               .anniu{
                   background-image: url(../images/btn_y.png);
                   background-size: contain;
                   background-repeat: no-repeat;
                   width: 28%;
                   height: 40px;
                   overflow: hidden;
                   margin-top: 5px;
                   margin-right: 30px;
                   text-align: center;
                   .font_tj{
                       font-size: 16px;
                       color: #384000;
                       line-height: 26px;
                       font-weight: bold;
                    }
                    &:hover{
                        background-image: url(../images/but_g.png);
                    }
                }
                .juli{
                   margin-left: 17%;
               }
            }
            .tanchuang{
                .dog_tc{
                    margin: 0 auto;
                    width: w(168px);
                    overflow: hidden;
                    margin-top: 185px;
                }
                .jiantou{
                    width: w(126px);
                    overflow: hidden;
                    position: absolute;
                    top: 80px;
                    right: 66px;
                }
            }
            
        }
        /*************查看好友评价页面*************/
       .yi{
           margin: 0 auto;
        } 
       .shang{
             margin-top: 10px;
        }
       .font_qp{
           font-size: 18px;
           font-family: "幼圆";
           color: #fff;
           line-height: 28px;
           text-align: center;
           em{
               font-size: 20px;
               padding: 0 10px;
           }
        }
        //留言
        .liuyan{
            margin-left: w(85px);
            margin-top: 15px;
            margin-bottom: 20px;
            .touxiang{
                width: w(59px);
                overflow: hidden;
                margin-right: 16px;
            }
            .font_ly{
                font-size: 16px;
                font-family: "幼圆";
                color: #fff;
                line-height: 26px;
            }
        }
        /**************底部***************/
       .foot{
           width: 100%;
           height: 20px;
           position: absolute;
           padding: 10px;
           left: 0;
           bottom: 0;
           color: #fff;
           background: #2c2c2c;
            .font_d{
                font-size: 14px;
                font-family: "幼圆";
                color: #fff;
                display: inline-block;
            }
           #guanzhu{
               width: w(110px);
               overflow: hidden;
               float: right;
               margin-top: -2px;
               margin-right: 5px;
           }
           #caidan{
               width: w(36px);
               overflow: hidden;
               float: right;
               padding-right: 20px;
               margin-top: 3px;
           }
       }
    }
    /*****************设配****************/
   /**************iphone4************/
   @media (min-width: 0px) and (max-height:481px) {
      #kugou .shouye .renwu {
            margin-left: 22%;
            margin-top: 10px;
        }
        #kugou .ye .wenti{
            font-size: 14px;
        }
        #kugou .ye .tupian{
           margin-top: 15px; 
        }
        #kugou .tupian_15{
           margin-top: 30px;
           margin-bottom: 30px; 
        }
        #kugou .name_14{
          font-size: 12px;  
        }
        #kugou .tupian_16{
            width: 45%;
            margin-top: 30px;
            margin-bottom: 35px;
        }
        #kugou .tupian_19{
            width: 40%;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        #kugou .ye .xuanxiang .xuanze .name{
            top: 3px;
        }
       #kugou .shouye .qipao_1{
           top: 250px;
       }
        #kugou .shouye .qipao_2{
           top: 250px;
       }
        #kugou .shouye .qipao_3{
           top: 360px;
       }
        #kugou .shouye .qipao_4{
           top: 365px;
       }
       #kugou .ye .tupian_01{
           margin-top: 5px;
       }
       #kugou .ye .xuanxiang{
           margin-top: 20px;
       }
       #kugou .ye .xuanxiang .xuanze{
           margin-top: 2px;
       }
       #kugou .ye .dog{
           margin-top: -55px;
       }
       #kugou .ceshi .kuang{
           width: 74%;
       }
       #kugou .ceshi .kuang .jieguo .zi .font{
           font-size: 18px;
       }
       #kugou .ceshi .kuang .renwu{
           bottom: 80px;
       }
       #kugou .ceshi .kuang .fenxiang{
           bottom: 160px;
       }
       #kugou .pingjia .ces .font_ce{
           font-size: 18px;
       }
       #kugou .pingjia .biaoqian .one{
           margin-top: 2px;
       }
       #kugou .pingjia .biaoqian .three{
           margin-left: 130px;
           margin-top: -20px;
       }
       #kugou .pingjia .biaoqian .two{
           margin-top: -10px;
           margin-left: 5px;
       }
       #kugou .pingjia .biaoqian .four{
           margin-top: -10px;
       }
       #kugou .pingjia .bottom .font_wenti{
           font-size: 12px;
           line-height: 26px;
       }
       #kugou .font_qp{
           font-size: 16px;
       }
       #kugou .liuyan .font_ly{
           font-size: 13px;
       }
       #kugou .foot .font_d{
           font-size: 12px;
       }
    }
    @media (max-height:586px){
        #kugou .ye .xuanxiang{
           margin-top: 10px;
        }
        #kugou .ye .tupian_01{
           margin-top: 10px;
       }
        #kugou .ceshi .kuang .renwu{
           bottom: 20px;
        }
        #kugou .shouye .renwu {
            margin-top: 10px;
        }
        #kugou .ye .xuanxiang .xuanze .name{
            top: 3px;
        }
       #kugou .shouye .qipao_1{
           top: 280px;
       }
        #kugou .shouye .qipao_2{
           top: 280px;
       }
        #kugou .shouye .qipao_3{
           top: 390px;
       }
        #kugou .shouye .qipao_4{
           top: 395px;
       }
       #kugou .ye .dog{
           margin-top: -60px;
       }
       
       #kugou .ceshi .kuang .fenxiang{
           bottom: 118px;
       }
       #kugou .pingjia .ces .font_ce{
           font-size: 18px;
           line-height: 30px;
       }
       #kugou .pingjia .biaoqian .one{
           margin-top: 10px;
       }
       #kugou .pingjia .biaoqian .three{
           margin-left: 20px;
           margin-top: 20px;
       }
       #kugou .pingjia .biaoqian .two{
           margin-left: 20px;
           margin-top: 5px;
       }
       #kugou .pingjia .biaoqian .four{
           margin-top: -10px;
       }
       #kugou .pingjia .bottom .font_wenti{
           font-size: 13px;
       }
       #kugou .pingjia .biaoqian{
           margin-top: 30px;
       }
       #kugou .font_qp{
           font-size: 16px;
       }
       #kugou .liuyan .font_ly{
           font-size: 14px;
       }
       #kugou .foot .font_d{
           font-size: 13px;
       }
    }
     @media (min-width:414px){
         #kugou .shouye .renwu{
             margin-top: 60px;
         }
         #kugou .shouye .title_1{
             margin-top: 30px;
         }
         #kugou .shouye .qiu{
             margin-top: 55px;
         }
         #kugou .shouye .yun_2{
             top: 280px;
         }
         #kugou .shouye .yun_3{
             top: 240px;
         }
         #kugou .shouye .yun_4{
             top: 320px;
         }
         #kugou .shouye .yun_5{
             top: 345px;
         }
         #kugou .shouye .qipao_1{
             top: 340px;
         }
         #kugou .shouye .qipao_2{
             top: 355px;
         }
         #kugou .shouye .qipao_3{
             top: 480px;
         }
         #kugou .shouye .qipao_3{
             top: 485px;
         }
         #kugou .shouye .ceshi{
             margin-top: 20px;
         }
         #kugou .ye .tupian_01{
             margin-top: 40px;
         }
         #kugou .ye .tupian{
             margin-top: 40px;
         }
         #kugou .ye .xuanxiang .xuanze{
             margin-top: 25px;
         }
         #kugou .ye .dog{
             margin-top: -85px;
         }
         #kugou .ye .music{
             margin-top: -200px;
         }
         #kugou .ceshi .kuang .renwu{
             bottom: -70px;
         }
         #kugou .ceshi .kuang .fenxiang{
             bottom: 12px;
         }
         #kugou .pingjia .biaoqian{
             margin-top: 20px;
             margin-bottom: 20px;
         }
         #kugou .pingjia .bottom textarea{
             margin: 12px 0;
         }
         #kugou .pingjia .dog_tx{
             margin-top: 20px;
         }
         #kugou .pingjia .ping{
             margin-top: 10px;
         }
         #kugou .pingjia .ping .font_g{
             padding: 5px 0;
         }
         #kugou .pingjia .dog_tx{
             margin-top: 30px;
         }
         #kugou .liuyan{
             margin-top: 25px;
         }
         #kugou .shang{
             margin-top: 15px;
         }
         #kugou .foot #guanzhu{
             margin-top: -5px;
            margin-right: 8px;
         }
         #kugou .foot #caidan{
             margin-top: 1px;
         }
     }
}
